<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>慕家居-北欧简约风家居</title>
    <meta name="keywords" content="慕家居，简洁，自然，人性化">
    <meta name="description" content="北欧，简约，自然，人性化，家居">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/css.css">
</head>

<body>
    <!-- 头部跟导航栏 -->
    <header>
        <div class="top ">
            <div class="tel center-warp">
                <span> 服务热线：400-8888-888 </span>
            </div>
        </div>
        <nav class="center-warp clearfix">
            <!-- 慕家居logo制作 -->
            <div class="log clearfix">
                <h2>慕家居</h2>
            </div>
            <!-- 导航栏引导制作 -->
            <div class="tool clearfix">
                <ul>
                    <li>
                        <a href="">
                            <div class="tool-icon">
                                <div class="icon">
                                </div>
                            </div>
                            <div class="icon-dl">网站首页</div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="tool-icon">
                                <div class="icon">
                                </div>
                            </div>
                            <div class="icon-dl">关于我们</div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="tool-icon">
                                <div class="icon">
                                </div>
                            </div>
                            <div class="icon-dl">服务建设</div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="tool-icon">
                                <div class="icon">
                                </div>
                            </div>
                            <div class="icon-dl">产品中心</div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="tool-icon">
                                <div class="icon">
                                </div>
                            </div>
                            <div class="icon-dl">服务大厅</div>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 搜索框制作 -->
            <div class="search">
                <input type="text" name="search" placeholder="请输入搜索内容">
                <button name="search"><span></span></button>
            </div>

        </nav>
    </header>
    <!-- banner区域 -->
    <section class="banner" id='banner'>
        <div class="banner-img">
            <img src="image/banner01.png" alt="" id="banner-img">
        </div>
        <div class="dot" id="dot">
            <ul>
                <li data-n='1' class="backcolor"></li>
                <li data-n='2'></li>
                <li data-n='3'></li>
            </ul>
        </div>
    </section>

    <script src="js/banner-carousel.js"></script>
    <!-- 产品介绍区域 -->
    <section class="product center-warp clearfix">

        <div class="btnright clearfix" id="product_btnright">
        </div>
        <div class="btnleft clearfix" id="product_btnleft"></div>
        <div class="product-display clearfix">
            <ul id="product-image">
                <li>
                    <img src="image/product01.png" alt="">
                    <em>时尚卫生间墙面颜色
                        2029装饰设计</em>
                </li>
                <li>
                    <img src="image/product02.png" alt="">
                    <em>现代北欧风格厨房装
                        2029饰效果图</em>
                </li>
                <li>
                    <img src="image/product03.png" alt="">
                    <em>现代时尚北欧风格卧
                        2029室装饰画</em>
                </li>
                <li>
                    <img src="image/product04.png" alt="">
                    <em>130平简约现代北欧
                        2029风格装修</em>
                </li>
                <li>
                    <img src="image/product05.png" alt="">
                    <em>现代北欧风格小客厅
                        2029装修设计</em>
                </li>
                <li>
                    <img src="image/product06.png" alt="">
                    <em>时尚卫生间墙面颜色
                        2029装饰设计</em>
                </li>
                <li>
                    <img src="image/product07.png" alt="">
                    <em>现代北欧风格厨房装
                        2029饰效果图</em>
                </li>
                <li>
                    <img src="image/product08.png" alt="">
                    <em>现代时尚北欧风格卧
                        2029室装饰画</em>
                </li>
                <li>
                    <img src="image/product09.png" alt="">
                    <em>130平简约现代北欧
                        2029风格装修</em>
                </li>
                <li>
                    <img src="image/product10.png" alt="">
                    <em>现代北欧风格小客厅
                        2029装修设计</em>
                </li>
            </ul>
        </div>
        <script src="js/proudct-carousel.js"></script>
    </section>
    <!-- 关于我们区域 -->
    <section class=" biaoti about clearfix">
        <div class="title">
            <h1>了解我们</h1>

            <div class="hr"><i></i></div>

            <em>about us</em>
            <div class="underline"></div>
        </div>
        <div class="about-us">
            <div class="about-left clearfix">
                <h1>关于我们</h1>
                <h3>慕家居装饰材料有限公司</h3>
                <em></em>
                <span>
                    慕家居家居装修网北欧风格家
                    具图片专, 是国内海量全面的
                    高质量北欧风格家具图片库…
                </span>
                <a href="">
                    <div class="more">
                        了解更多
                    </div>
                </a>

            </div>
            <div class="about-center">
                <img src="image\aboutus.png" alt="">
            </div>
            <div class="about-right">
                <ul>
                    <li class="liuyan">
                        <a href="">

                            <div class="ico"></div>
                            <div class="explain">
                                <p>在线留言</p>
                                <em>on-line message</em>
                            </div>

                        </a>
                    </li>
                    <li class="ad">
                        <a href="">

                            <div class="ico"></div>
                            <div class="explain">
                                <p>广告经营</p>
                                <em>Advertising management</em>
                            </div>

                        </a>
                    </li>
                    <li class="network">
                        <a href="">
                            <div class="aside">
                                <div class="ico"></div>
                                <div class="explain">
                                    <p>网络咨询</p>
                                    <em>Network consultation</em>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>

        </div>
    </section>
    <!-- 关于我们区域 -->
    <!-- 精品推荐 -->
    <section class="recommend">
        <div class="recommend-title ">
            <h1>精品推荐</h1>
            <h3>Boutique recommendation</h3>
            <em></em>
        </div>
        <div class="boutique center-warp ">
            <div class="btnright " id="recommend-btnright"></div>
            <div class="btnleft clearfix" id="recommend-btnleft"></div>
            <div class="boutique-display">
                <ul id="recommend-img">
                    <li>
                        <img src="image\recommend1.png" alt="">
                        <span>轻奢风格样板房客厅色彩搭配装修设计</span>

                    </li>
                    <li>
                        <img src="image\recommend2.png" alt="">
                        <span>简约美式风格卧室衣柜设计</span>
                    </li>
                    <li>
                        <img src="image\recommend3.png" alt="">
                        <span>轻奢风格L型厨房装修设计</span>
                    </li>

                    <li>
                        <img src="image\recommend4.png" alt="">
                        <span>轻奢风格样板房客厅色彩搭配装修设计</span>
                    </li>
                    <li>
                        <img src="image\recommend5.png" alt="">
                        <span>简约美式风格卧室衣柜设计</span>
                    </li>
                    <li>
                        <img src="image\recommend6.png" alt="">
                        <span>轻奢风格L型厨房装修设计</span>
                    </li>
                    <li>
                        <img src="image\recommend7.png" alt="">
                        <span>轻奢风格样板房客厅色彩搭配装修设计</span>
                    </li>
                    <li>
                        <img src="image\recommend8.png" alt="">
                        <span>简约美式风格卧室衣柜设计</span>
                    </li>
                    <li>
                        <img src="image\recommend9.png" alt="">
                        <span>轻奢风格L型厨房装修设计</span>
                    </li>
                </ul>
            </div>



        </div>
        <script src="js/recommend.js"></script>
    </section>
    <!-- 精品推荐 -->
    <!-- 新闻中心 -->
    <section class="new biaoti clearfix">
        <div class="title">
            <h1>新闻中心</h1>
            <div class="hr"><i></i></div>
            <em> press center </em>
            <div class="underline"></div>
        </div>
        <div class="artcile">
            <ul>
                <li class="one">
                    <div class="tubiao">
                        01
                    </div>
                    <dl>
                        <dt>最新招标</dt>
                        <dd>重庆业主要求：一居室的户型，想把阳台利用起来，改成一室一厅的户型，业主表示已经请朋友把以前的装修敲了，现在基本是毛坯的状态……</dd>
                    </dl>
                </li>
                <li class="two">
                    <div class="tubiao">
                        02
                    </div>
                    <dl>
                        <dt>装修日记</dt>
                        <dd>终于在北京四环里贷款买了套两居室二手房，还是很欣喜的，为了装好它，我可真是费了心了，毕竟是自己以后的小家，所以我真是没少操心……</dd>
                    </dl>
                </li>
                <li class="three">
                    <div class="tubiao">
                        03
                    </div>
                    <dl>
                        <dt>装修百科</dt>
                        <dd>买房之后，无论是毛坯房还是留下二手房，很多业主都会选择进行装修。装修可以为你带来一个你喜欢的房屋，同时满足你需要的生活方式……</dd>
                    </dl>
                </li>
                <li class="four">
                    <div class="tubiao">
                        04
                    </div>
                    <dl>
                        <dt>热门搜索</dt>
                        <dd>选择防盗门最重要的就是工艺质量：应特别注意检查有无焊接缺陷，诸如开焊、未焊、漏焊等现象。看门扇与门框的配合是否密实，间隙是否均匀……</dd>
                    </dl>
                </li>
            </ul>
        </div>
    </section>
    <!-- 新闻中心 -->
    <!-- 尾部 -->
    <footer class="clearfix">
        <div class="r1 center-warp clearfix">
            <h1>慕家居</h1>
            <ul>
                <li>咨询电话：010-88888888</li>
                <li>公司网址：www.imooc.com</li>
                <li>邮箱：KEFU@IMOOC.com</li>
            </ul>

        </div>
        <div class="r2">Copyright &copy; 2020 imooc.com All Rights Reserved | 京ICP备 </div>
    </footer>
</body>

</html>